<script setup lang="ts">
import {ref} from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { Vue3AutoScroll } from "vue3-auto-scroll";
import "vue3-auto-scroll/dist/style.css";

const lists = ref([
  {
    name:'杭州浙江工业大学店'
  },
  {
    name:'杭州南站店'
  },
  {
    name:'杭州新里程店'
  },
  {
    name:'宁波奉化社区店'
  },
  {
    name:'杭州未来科技城宝龙店'
  },
  {
    name:'杭州世宸名府店'
  },
  {
    name:'杭州青山湖宝龙广场店'
  },
  {
    name:'杭州桐庐社区店'
  },
  {
    name:'嘉兴嘉善社区店'
  },
  {
    name:'金华缤虹星城店'
  },
  {
    name:'绍兴宝龙天地店'
  },
  {
    name:'绍兴荣安观江园店'
  },
  {
    name:'绍兴花语江南店'
  },
  {
    name:'绍兴彩虹府店'
  },
  {
    name:'杭州临安桃李湖滨店'
  },
  {
    name:'杭州拱墅运河印万融城店'
  },
  {
    name:'嘉兴龙盛华城店'
  },
  {
    name:'杭州上城衍新玉府店'
  },
  {
    name:'宁波高新宝龙广场店'
  },
  {
    name:'杭州拱墅西瑞大厦店'
  },
  {
    name:'杭州余杭富力中心店'
  }
])
</script>

<template>
  <div class="overflow-auto h-[85%]">
    <div class="flex items-center h-[56px] rounded-[8px]" style="background: rgba(251, 45, 25, .15)">
      <div class="text-[18px] text-center ff-DingTalk w-[150px]">排名</div>
      <div class="text-[18px] ff-DingTalk">门店</div>
    </div>
      <div class="overflow-auto h-[260px]">
        <vue3-auto-scroll :list="lists" :copyNum="0" class="" :speed="0.5" :backSpeed="200">
          <div class="flex items-center h-[56px] rounded-[8px]" :style="{
        background: i % 2 == 0 ? '' : 'rgba(251, 45, 25, .15)'
      }" v-for="(item,i) in lists" :key="i">
            <div class="w-[150px] flex justify-center">
              <img v-if="i===0" class="w-[20px] h-[20px]" src="@/assets/img/icon/ic_diyi.png">
              <img v-else-if="i===1" class="w-[20px] h-[20px]" src="@/assets/img/icon/ic_dier.png">
              <img v-else-if="i===2" class="w-[20px] h-[20px]" src="@/assets/img/icon/ic_disan.png">
              <div v-else class="text-[18px] text-center ff-DingTalk">{{ i+1 }}</div>
            </div>
            <div class="text-[18px]">{{ item.name }}</div>
          </div>
        </vue3-auto-scroll>
      </div>
  </div>
</template>

<style scoped lang="scss">
</style>
